<html>
	<header>
	
	
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	 
	<script src="https://minedata.cn/minemapapi/v1.4/minemap.js"></script>
	 <link rel="stylesheet" href="https://minedata.cn/minemapapi/v2.0.0/minemap.css">

   
    <style>
      body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
	
</style>
</header>
<body>
 
<div id='map'></div>
 
<script>
  
 
minemap.accessToken = '449ba822788c46bea9f90dfba48e5269';
minemap.solution = '4013';

var myjson = {}

const map = new minemap.Map({
    container: 'map',
    style: 'http://minedata.cn/service/solu/style/id/4013',
    center: [118.8386378, 37.0313616],
    zoom: 10,
    bearing: 0,
    pitch: 45,
});

var layerId = "1"

map.on('load', function () {
	
	map.addSource("psid",{ "type":"vector","tiles":["http://localhost:8004/test/pbf/{z}/{x}/{y}"]})

    map.addLayer({
        "id": layerId,
        "type": "circle",
        "source": "psid",
        "source-layer": "position",
        "paint": {
            "circle-radius":4,
            "circle-color":[
                            "match",
                            ["get","id"],
                            1,"#fbb03b",
                            2,"#223b53",
                            3,"#e55e5e",
                            4,"#3bb2d0",
                            "#ccc"
                            ]
        }
    });
    
	
    
    function myfun(){
    	
    	map.removeLayer(layerId)
    	map.removeSource("psid")
    	map.addSource("psid",{ "type":"vector","tiles":["http://localhost:8004/test/pbf/{z}/{x}/{y}"]})
    	var tv = parseInt(layerId)+1
    	
    	layerId = tv.toString()
    	
    	 map.addLayer({
    	        "id": layerId,
    	        "type": "circle",
    	        "source": "psid",
    	        "source-layer": "position",
    	        "paint": {
    	            "circle-radius":4,
    	            "circle-color":[
    	                            "match",
    	                            ["get","id"],
    	                            1,"#fbb03b",
    	                            2,"#223b53",
    	                            3,"#e55e5e",
    	                            4,"#3bb2d0",
    	                            "#ccc"
    	                            ]
    	        }
    	    });
    }
    
    window.setInterval(myfun,2222)
   
   
   

});
 
</script>   
</body>
</html>